<template>
  <!-- 作业管理  -->
  <div class="rule-box">
    <div v-if="$route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="app-container">
      <HkSearchform
        :data="queryParams"
        :field-list="filterInfo.fieldList"
        :list-type-info="filterInfo.dictList"
        @handleSearch="handleQuery"
        @handleReset="handleReset"
        @handleEvent="handleEvent"
      />
      <el-row class="mt2">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增 </el-button>
        </el-col>
        <!--      <el-col :span="1.5" style="margin:0 10px;">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="#"
          accept=".zip"
          :auto-upload="false"
          :show-file-list="false"
        >
          <el-button class="el-button el-button&#45;&#45;mini"><i
            class="el-icon-upload"
          ></i><span>导入</span></el-button>
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button class="el-button el-button&#45;&#45;mini is-" @click="downloadExcelDC">
          &lt;!&ndash;&ndash;&gt;<i class="el-icon-download"></i><span>导出</span></el-button>
      </el-col>-->
      </el-row>
      <HkTable
        ref="table"
        :total="total"
        :loading="loading"
        :table-data="tableData"
        :query-params="queryParams"
        :table-columns="tableLabelList"
        :operate="true"
        :show-pag="true"
        :selection="true"
        :show-index="true"
        @changePage="getList"
      >
        <!--    主被动类型       -->
        <template #type="scope">
          {{ scope.row.type == 0 ? '被动' : '主动' }}
        </template>
        <!--    启用状态      -->
        <template #runState="scope">
          <el-switch
            v-model="scope.row.runState"
            class="drawer-switch"
            active-value="0"
            inactive-value="1"
            @change="handleSwitch($event, scope.row)"
          />
        </template>
        <template #operate="scope">
          <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
          <!--            <el-button @click="handleDeploy(scope.row)" type="text">一键配置</el-button>-->
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </HkTable>
      <!-- 添加或修改对话框 -->
      <editDialog
        ref="editRef"
        :title="title"
        :echo-data="formData"
        :table-data="importProduct"
        :current-id="currentId"
        @submitForm="handleQuery"
      />
    </div>
  </div>
</template>

<script>
import HkSearchform from '@/components/HkSearchform'
import HkTable from '@/components/Hk-Table'
import editDialog from './jobScheduleAdd'
import {
  getList,
  schedulingdetail,
  schedulingDelete,
  schedulingConfig,
  getScheduTaskList
} from '@/api/milkyway/jobScheduling'

export default {
  name: 'TaskList',
  components: { editDialog, HkSearchform, HkTable },
  data() {
    return {
      loading: false,
      // 搜索配置项
      filterInfo: {
        fieldList: [
          {
            label: '作业名称',
            type: 'input',
            field: 'name'
          },
          {
            label: '主被动类型',
            type: 'select',
            field: 'type',
            list: 'typeList'
          }
        ],
        dictList: {
          typeList: [
            { label: '被动', value: '0' },
            { label: '主动', value: '1' }
          ]
        }
      },
      deployTitle: '',
      title: '',
      tableData: [],
      tableLabelList: [
        { label: '作业名称', param: 'name' },
        { label: '主被动类型', param: 'type', type: 'slot' },
        { label: '启用状态', param: 'runState', type: 'slot' }
      ],
      queryParams: {
        name: '',
        type: '',
        current: 0,
        size: 10
      },
      formData: {},
      total: 0,
      importProduct: [],
      currentId: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 导出**/
    downloadExcelDC() {
      const a = document.createElement('a')
      a.href = '/static/export.xlsx'
      a.download = '导出数据.xlsx'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    getList() {
      getList(this.queryParams).then((res) => {
        this.tableData = res.list
        this.total = res.total
      })
    },
    // 新增
    handleAdd() {
      this.currentId = ''
      this.$refs.editRef.show()
      this.title = '添加'
    },
    /** 触发搜索表单变化 */
    handleEvent(obj) {
      this.queryParams[obj.field] = obj.value
    },
    // 查询
    handleQuery() {
      this.queryParams.current = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams.name = undefined
      this.queryParams.type = undefined
      this.getList()
    },
    // 编辑
    handleUpdate(row) {
      schedulingdetail({ id: row.id }).then((res) => {
        this.formData = res
        this.currentId = row.id
      })
      getScheduTaskList({ id: row.id }).then((res) => {
        this.importProduct = res
      })

      this.$refs.editRef.show()
      this.title = '编辑'
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除此数据项？')
        .then(function() {
          return schedulingDelete({ id: row.id })
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 一键配置 **/
    handleDeploy() {
      this.$refs.deployRef.isOpen = true
      this.deployTitle = '配置'
    },
    /** 查看日志*/
    handleLook() {
      this.$refs.viewLogRef.isOpen = true
    },
    /** 启用状态 */
    handleSwitch(value, row) {
      schedulingConfig({ id: row.id, config: value })
        .then(() => {
          this.$message.success('状态修改成功')
          this.getList()
        })
        .catch(() => {
          this.getList()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  .targetTable {
    flex: 1;
    // overflow-y: auto;
  }
}
.box {
  padding: 2px 5px;
  margin-right: 5px;
  background: #f2f2f2;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
</style>
